<template>
	<view class="map-container">
		<map
		  id="map"
		  :longitude="longitude" 
		  :latitude="latitude" 
		  scale="14"
		  :markers="markers"
		  show-location
		  style="width: 100%;height: 400rpx;;border-radius: 24rpx;overflow: hidden;"
		>
		  <cover-view slot="callout">
		  	<cover-view class="custom-callout" :marker-id="markers[0].id">
				<cover-view class="callout-title">工作地点</cover-view>
				<cover-view class="callout-content ellipsis">下陆区·国投发展大厦A栋320国投发展大厦A栋320国投发展大厦A栋320</cover-view>
			</cover-view>
		  </cover-view>
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: 113.324520,
				latitude: 23.099994,
				markers: [{
					id: 0,
					latitude: 23.099994,
					longitude: 113.324520,
					width: 24,
					height: 24,
					iconPath: 'https://hxs.dsjhs.com:553/prod-api/profile/weizhi-icon.png',
					customCallout: {
					  anchorY: 0,
					  anchorX: 0,
					  display: 'ALWAYS'
					}
				}],
				  
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.map-container {
		height: 400rpx;
		border-radius: 24rpx;
		overflow: hidden;
		margin-top: 20rpx;
		.custom-callout {
			position: relative;
			width: 440rpx;
			height: 116rpx;
			padding: 16rpx 16rpx 20rpx 24rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.08);
			border-radius: 12px;
			box-sizing: border-box;
			.callout-title {
				display: block;
				font-weight: 600;
				font-size: 28rpx;
				margin-bottom: 8rpx;
				color: #34314F;
				line-height: 20px;
				text-align: left;
			}
			.callout-content {
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(52, 49, 79, 0.7);
				line-height: 16px;
				text-align: left;
				font-style: normal;
			}
			&::after {
				position: absolute;
				top: 50%;
				right: 20rpx;
				display: block;
				width: 32rpx;
				height: 32rpx;
				transform: translateY(-50%);
				background: url('@/static/images/index/right-arrow.png') no-repeat center;
				background-size: 100% 100%;
				content: '';
			}
		}
		
		.ellipsis {
			white-space: nowrap; /* 不换行 */
			overflow: hidden; /* 隐藏超出的内容 */
			text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
			max-width: 370rpx; /* 设置最大宽度以限制文本的显示长度 */
		}
	}
</style>